<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>flex不换省略号显示</title>
	<style type="text/css">
		.d1{
			display: flex;
			width: 930px;
			height: 300px;
			border: 1px solid #000000;
		}
		img{
			width: 50px;
		}
		.d1 div:first-child{
			width: 150px;
			height: 137px;
			display: flex;
			background: #00FFFF;
		}
		.fir div{
			flex: 1;
			width: 0;
		}
		/*.d1 div p{
			overflow: hidden;
			white-space: nowrap;		不换行
			text-overflow: ellipsis;
		}*/
		.d1 div h5{
			overflow: hidden;
			white-space: nowrap;		/*不换行*/
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<div class="d1">
		<div class="fir">
			<img src="img/dingwei.jpg"/>
			<div>
				<h5>撒旦发射点发萨达萨达方面能够方面能够方面sdas能够</h5>
				<p>委任他为提供的方面能够</p>
			</div>
		</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</body>
</html>